<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="客户姓名">
        <el-input v-model="searchForm.customerName" placeholder="请输入客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="searchForm.phone" placeholder="请输入联系方式"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleRestSearch()">重置</el-button>
        <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-end">
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="客户姓名" prop="customerName" align="center"></el-table-column>
      <el-table-column label="联系电话" prop="phone" align="center"></el-table-column>
      <el-table-column label="备注" prop="remark" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total > 0"
      class="flex justify-center mt-5"
      background
      layout="total,prev, pager, next"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="客户姓名" prop="customerName">
          <el-input v-model="form.customerName"></el-input
        ></el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import { getCustomerListApi, updateCustomerApi } from "@/api/repair";
//表格
const { tableData, searchForm, limit, total, handleRestSearch, handleGetTableList } = useInitTable({
  searchForm: {
    customerName: "",
    phone: ""
  },
  getTableList: getCustomerListApi
});

// 修改
const { formDrawerRef, drawerTitle, form, rules, formRef, handleEdit, handleSubmit } = useInitForm({
  form: {
    id: "",
    customerName: "",
    phone: "",
    remark: ""
  },
  rules: {
    customerName: [{ required: true, message: "请输入客户姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入联系电话", trigger: "blur" },{
      validator: (rule: any, value: string, callback: any) => {
        if (!/^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/.test(value)) {
          callback(new Error("请输入正确的号码,座机用-"));
        } else {
          callback();
        }
      }
    }]
  },
  updateData: updateCustomerApi,
  success: () => {
    handleGetTableList();
  }
});
</script>
<style scoped lang="scss"></style>
